<!-- 我的成就 -->
<template>
	<view class="content">
		<!-- 称号 banner -->
		<view class="achievement" v-for="(item, index) in achievement_list" :key="index">
				<view class="mask" :hidden= "judge_cover[index] ? true : false" @click="showAchievement(index)"></view>
				<view class="title" @click="showAchievement(index)">{{item}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				judge_cover:[true, true, true, true, false, false, false],
				achievement_list: ['冉冉新星', '购物达人', '评论狂人', '社区名师', '粉丝破千', '单打冠军', '混双冠军']
			};
		},
		methods: {
			showAchievement(index){
				if(this.judge_cover[index] == true){
					uni.showToast({
						title: '您已获取该称号',
						icon: 'none',
						duration: 2000
					})
				} else {
					uni.showToast({
						title: '您未获取该称号!',
						icon: 'none',
						duration: 2000
					})
				}
			}
		}
	};
</script>

<style>
	page {
		height: 100vh;
		width: 100vw;
	}

	.content {
		background-image: url();
		/* 图片素材background_1.jpg */
		background-size: cover;
		height: 100vh;
		width: 100vw;
		display: flex;
		flex-direction: column;
	}

	.achievement {
		position: relative;
		left: 8%;
		margin-top: 70rpx;
		width: 75%;
		padding: 30upx 4%;
		background: linear-gradient(to left, #dea96d 0%, #f6d59b 100%);
		box-shadow: 0upx 0upx 25upx rgba(0, 0, 0, 0.2);
		border-radius: 15upx;
		display: flex;
		align-items: center;
	}

	.title {
		position: relative;
		margin-left: 10upx;
		width: 100%;
		color: #796335;
		font-size: 40upx;
		text-align: center;
	}
	
	.mask {
	  position: absolute;
		left: 0;
		border-radius: 15upx;
		width: 100%;
		height: 100%;
	  background-color: rgba(0, 0, 0, 0.3);
	  z-index: 1;
	}

</style>